<template>
	<div class="login-container">
		<van-nav-bar title="登录">
			<template #left>
				<van-icon name="cross" @click="$router.back()"></van-icon>
			</template>
		</van-nav-bar>
		<van-form ref="loginForm" @submit="onSubmit">
			<van-field v-model="user.mobile" type="number" maxlength="11" name="mobile" placeholder="请输入手机号"
				:rules="userFromRules.mobile">
				<template #left-icon>
					<i class="iconfont icon-shouji"></i>
				</template>
			</van-field>
			<van-field v-model="user.code" name="code" maxlength="6" placeholder="请填写验证码" :rules="userFromRules.code">
				<template #left-icon>
					<i class="iconfont icon-yanzhengma"></i>
				</template>
				<template #button>
					<van-count-down @finish="isCountDownShow = false" v-if="isCountDownShow" :time="1000 * 60"
						format="ss s" />
					<van-button v-else native-type="button" @click="onSendSms" class="send-sms-btn" type="default"
						round>获取验证码</van-button>
				</template>
			</van-field>
			<div class="login-btn-wrap">
				<van-button class="login-btn" block type="info" native-type="submit">登录</van-button>
				<div class="info">万能验证码：246810</div>
			</div>
		</van-form>

		<div class="bottom"><a href="javascript:;">隐私条款</a></div>
	</div>
</template>

<script>
	import {
		login,
		sendSms
	} from '@/api/user'

	export default {
		data() {
			return {
				user: {
					mobile: '18271989297',
					code: '246810'
				},
				userFromRules: {
					mobile: [{
						required: true,
						message: '手机号不能为空'
					}, {
						pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
						message: '请输入正确的手机号'
					}],
					code: [{
						required: true,
						message: '验证码不能为空'
					}, {
						pattern: /\d{6}/,
						message: '请输入正确的验证码'
					}]
				},
				isCountDownShow: false
			}
		},
		methods: {
			async onSubmit() {
				const user = this.user

				this.$toast.loading({
					message: '登录中...',
					forbidClick: true,
					duration: 0
				});

				try {
					const {data: res} = await login(user)
					this.$store.commit('setUser', res.data)
					this.$toast.success("登录成功")
					this.$router.back()
				} catch (e) {
					if (e.response.status === 400) {
						this.$toast.fail("用户名或验证码错误")
					} else {
						this.$toast.fail("未知的错误")
					}
				}
			},

			async onSendSms() {
				try {
					await this.$refs.loginForm.validate('mobile')
				} catch (e) {
					return
				}
				this.isCountDownShow = true

				try {
					await sendSms(this.user.mobile)
					this.$toast("发送成功")
				} catch (e) {
					this.isCountDownShow = false
					if(e.response.status === 429) {
						this.$toast("发送太频繁了，请稍后再试")
					} else {
						this.$toast("发送失败，请稍后重试")
					}
					return 
				}
			},
		},
	}
</script>

<style lang="less" scoped>
	.login-container {
		.iconfont {
			font-size: 37px;
		}

		.send-sms-btn {
			background-color: #ededed;
			width: 152px;
			height: 46px;
			line-height: 46px;
			font-size: 17px;
			color: #666;
		}

		.login-btn-wrap {
			padding: 53px 33px;

			.login-btn {
				background-color: #6db4fb;
				border: none;
			}
		}

		.bottom {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 20px;

			a {
				font-size: 25px;
				color: gray;
			}
		}
		
		.info {
			font-size: 22px;
			text-align: center;
			margin-top: 15px;
			color: #666;
		}
	}
</style>
